<template>
	<view class="containar">
		<view class="tabBox">
			<view class="tabItem" v-for="item in typeData" :key="item.id" @click="choseType(item.id)">
				<view class="tabText">{{ item.name }}</view>
				<view class="chose" v-show="choseId == item.id"></view>
			</view>
			<!-- <view class="tabItem">
				<view class="tabText">生活服务</view>
				<view class="chose"></view>
			</view> -->
		</view>
		<view class="bannerBox">
			<!-- <view class="bannerBack"></view> -->
			<u-swiper :list="bannerList" :height="700"></u-swiper>
			

		</view>
		<view class="btnBox">
			<view class="btnItem" v-for="(item, index) in typeBtnList" :key="index" @click="gotoInfo(item.name)"><img
					:src="item.imgUrl" alt=""><text class="font"><span>{{ item.name }}</span></text></view>

		</view>
		<!-- <view class="btnBox">
			<view class="btnItem"><img
					src="http://miniapps.libaokj.com/upload/images/20220628/029c886ca779ac8fe64e44bf5d26b99d.png"
					alt=""><text class="font"><span>汽车代驾</span></text></view>
			<view class="btnItem"><img
					src="http://miniapps.libaokj.com/upload/images/20220628/2ef9e776ae97bc423a5d0bff93afb99c.png"
					alt=""><text class="font"><span>年检代办</span></text></view>
			<view class="btnItem"><img
					src="http://miniapps.libaokj.com/upload/images/20220628/4d94b17bb9c5703a62e5437905763550.png"
					alt=""><text class="font"><span>安全检测</span></text></view>
			<view class="btnItem"><img
					src="http://miniapps.libaokj.com/upload/images/20220628/57bded73348010dc6c6a93b606d4a053.png"
					alt=""><text class="font"><span>道路救援</span></text></view>
			<view class="btnItem"><img
					src="http://miniapps.libaokj.com/upload/images/20220628/77b08cd67a6b4ec2238b16f821087459.png"
					alt=""><text class="font"><span>影视会员</span></text></view>
			<view class="btnItem"><img
					src="http://miniapps.libaokj.com/upload/images/20220628/8167ac74bc9eefa9d4299326cff5a32e.png"
					alt=""><text class="font"><span>观影卡</span></text></view>
			<view class="btnItem"><img
					src="http://miniapps.libaokj.com/upload/images/20220628/e9458e9e65cf87a14d2dc8a4ab693768.png"
					alt=""><text class="font"><span>紧急家居救援</span></text></view>
			<view class="btnItem"><img
					src="http://miniapps.libaokj.com/upload/images/20220628/03d6c462f41f073b28c321db75a84197.png"
					alt=""><text class="font"><span>家电清洗</span></text></view>
		</view> -->
		<view class="THarea">优惠活动</view>
		<view class="THbox">
			<view class="THitem" v-for="(item, index) in THList" :key="index" @click="gotoInfo(item.name)">
				<view class="bgPosition">
					<view class="bgImg" :style="'background-image: url(' + item.imgUrl + ');'">
					</view>
					<!-- <view class="text">{{ item.name }}</view> -->
				</view>
			</view>
		</view>
		<!-- <view class="THbox">
			<view class="THitem">
				<view class="bgPosition">
					<view class="bgImg"
						style="background-image: url('http://miniapps.libaokj.com/upload/images/20220628/658d1b118d617ec37fdbe480c5dd0fc9.jpg');">
					</view>
					<view class="text">汽车代驾</view>
				</view>
			</view>
			<view class="THitem">
				<view class="bgPosition">
					<view class="bgImg"
						style="background-image: url('http://miniapps.libaokj.com/upload/images/20220628/499c3387995dedfb6f64a6e8964472ac.jpg');">
					</view>
					<view class="text">年检代办</view>
				</view>
			</view>
			<view class="THitem">
				<view class="bgPosition">
					<view class="bgImg"
						style="background-image: url('http://miniapps.libaokj.com/upload/images/20220628/3b076798e729c2afd38f227066ede1aa.jpg');">
					</view>
					<view class="text">安全检测</view>
				</view>
			</view>
			<view class="THitem">
				<view class="bgPosition">
					<view class="bgImg"
						style="background-image: url(&quot;http://miniapps.libaokj.com/upload/images/20220701/6f58fe224800e1c0eb12cf4c882e5b54.jpg&quot;);">
					</view>
					<view class="text">影视会员</view>
				</view>
			</view>
			<view class="THitem">
				<view class="bgPosition">
					<view class="bgImg"
						style="background-image: url(&quot;http://miniapps.libaokj.com/upload/images/20220701/21f6a1be3977820bc167d442e8ad1db1.jpg&quot;);">
					</view>
					<view class="text">观影卡</view>
				</view>
			</view>
			<view class="THitem">
				<view class="bgPosition">
					<view class="bgImg"
						style="background-image: url(&quot;http://miniapps.libaokj.com/upload/images/20220628/c5ad74ec102eb06e183dcba70278b5fb.jpg&quot;);">
					</view>
					<view class="text">紧急家居救援</view>
				</view>
			</view>
		</view> -->
	</view>
</template>


<script>
import publicSwiper from "@/components/publicSwiper.vue"

export default {
	components:{
		publicSwiper
	},
	data() {
		return {
			choseId: '1',
			typeBtnList: [],
			THList: [],
			bannerList: [
				"https://minio.91cloudpay.com:4443/file/lx-banner-2.jpg",
				"https://minio.91cloudpay.com:4443/file/lx-banner-1.jpg",
			],
			typeData: [{
				id: "1",
				name: '汽车服务',
				typeBtnList: [
					{
						name: '汽车代驾',
						imgUrl: 'http://miniapps.libaokj.com/upload/images/20220628/029c886ca779ac8fe64e44bf5d26b99d.png',
					},
					{
						name: '年检代办',
						imgUrl: 'http://miniapps.libaokj.com/upload/images/20220628/2ef9e776ae97bc423a5d0bff93afb99c.png',
					},
					{
						name: '安全检测',
						imgUrl: 'http://miniapps.libaokj.com/upload/images/20220628/4d94b17bb9c5703a62e5437905763550.png',
					},
					{
						name: '道路救援',
						imgUrl: 'http://miniapps.libaokj.com/upload/images/20220628/57bded73348010dc6c6a93b606d4a053.png',
					},
				],
				
				THList: [
					{
						name: '汽车代驾',
						// imgUrl: 'http://miniapps.libaokj.com/upload/images/20220629/7939f366e13e487c15df6cf4b56d40cd.jpg',
						imgUrl: 'http://miniapps.libaokj.com/upload/images/20220628/658d1b118d617ec37fdbe480c5dd0fc9.jpg',
						// imgUrl: 'http://miniapps.libaokj.com/upload/images/20220628/66b3e27698252cb958aa0efa851ac46a.jpg',
					},
					{
						name: '年检代办',
						// imgUrl: 'http://miniapps.libaokj.com/upload/images/20220629/b3cffedf869e34bc2884aa17db6cd76e.jpg',
						imgUrl: 'http://miniapps.libaokj.com/upload/images/20220628/499c3387995dedfb6f64a6e8964472ac.jpg',
						// imgUrl: 'http://miniapps.libaokj.com/upload/images/20220628/478c0fc97412f6a751a53d4a6cb0a19c.jpg',
					},
					{
						name: '安全检测',
						// imgUrl: 'http://miniapps.libaokj.com/upload/images/20220629/4668ade2c77946700fc1ce0e00616e9a.jpg',
						imgUrl: 'http://miniapps.libaokj.com/upload/images/20220628/3b076798e729c2afd38f227066ede1aa.jpg',
						// imgUrl: 'http://miniapps.libaokj.com/upload/images/20220628/99bd5006248cf986d44b7388cbaaaf95.jpg',
					}
				]
			},
			{
				id: "2",
				name: '银行服务',
				typeBtnList: [
					{
						name: '个人金融',
						imgUrl: 'https://minio.91cloudpay.com:4443/file/lx-bankService-money1.png',
					},
					{
						name: '小微金融',
						imgUrl: 'https://minio.91cloudpay.com:4443/file/lx-bankService-money2.png',
					},
					{
						name: '公司金融',
						imgUrl: 'https://minio.91cloudpay.com:4443/file/lx-bankService-money3.png',
					},
					{
						name: '金融市场',
						imgUrl: 'https://minio.91cloudpay.com:4443/file/lx-bankService-money4.png',
					},
				],
				THList: [
					{
						name: '成都“520”消费券促消费活动',
						imgUrl: 'https://minio.91cloudpay.com:4443/file/lx-bankService-bank1.jpg',
					},
					{
						name: '成都地区优惠活动',
						imgUrl: 'https://minio.91cloudpay.com:4443/file/lx-bankService-bank2.jpg',
					},
					{
						name: '四川银行开业有礼',
						imgUrl: 'https://minio.91cloudpay.com:4443/file/lx-bankService-bank3.jpg',
					}
				]
			}]
		}
	},
	methods: {
		choseType(id) {
			this.choseId = id
			this.typeData.forEach(item => {
				if (item.id == id) {
					this.typeBtnList = item.typeBtnList
					this.THList = item.THList
					
				}	
				
				if(id == '1'){
					this.bannerList = [
						// require("../static/images/lx-banner-lx25.jpg"),
						"https://minio.91cloudpay.com:4443/file/lxService/lx-banner-lx30.jpg",
						"https://minio.91cloudpay.com:4443/file/lxService/lx-banner-lx29.jpg",
						"https://minio.91cloudpay.com:4443/file/lx-banner-lx28.jpg",
						"https://minio.91cloudpay.com:4443/file/lx-banner-lx27.jpg",
						"https://minio.91cloudpay.com:4443/file/lx-banner-lx26.jpg",
						"https://minio.91cloudpay.com:4443/file/lx-banner-lx25.jpg",
						"https://minio.91cloudpay.com:4443/file/lx-banner-lx24.jpg",
						"https://minio.91cloudpay.com:4443/file/lx-banner-lx23.jpg",
				
				
				
				
					]
				}else if(id == '2'){
					this.bannerList = [
				"https://minio.91cloudpay.com:4443/file/lx-banner-1.jpg",
					]
				}

			});
		},
		gotoInfo(name) {
			uni.navigateTo({ url: '/subpage/articleInfo/articleInfo?name=' + name })
		}
	},
	onLoad() {
		this.choseType('1')
	}
}

</script>

<style lang="scss" scoped>
.containar {
	padding: 14rpx 16rpx;
	background: #fff;

	.tabBox {
		display: flex;
		justify-content: space-around;
		height: 78rpx;
		margin-bottom: 30rpx;

		.tabItem {
			display: flex;
			align-items: center;
			flex-direction: column;

			.tabText {
				padding: 18rpx 0;
				font-size: 22rpx;
				font-weight: 700;
				color: #545861;
			}

			.chose {
				width: 74rpx;
				height: 8rpx;
				background-color: #000d17;
			}
		}
	}

	.bannerBox {
		height:700rpx;
		margin-bottom: 50rpx;

		// /deep/.u-swiper-wrap{
		// 	height: 100% !important;
		// }

		.bannerBack {
			width: 100%;
			height: 100%;
			background: url("https://minio.91cloudpay.com:4443/file/lx-banner-2.jpg");
			background-size: cover;
			// background-position: center center;
			/* 可选，确保背景图片居中显示 */
			background-repeat: no-repeat;
			/* 可选，确保背景图片不重复 */
		}
	}

	.btnBox {
		display: flex;
		flex-wrap: wrap;

		.btnItem {
			padding: 22rpx 0;
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 25%;

			img {
				width: 58rpx;
				height: 58rpx;
				margin-bottom: 22rpx;
			}

			.font {
				font-size: 26rpx;
				color: #1a1919;
			}
		}
	}

	.THarea {
		padding: 40rpx 0;
		font-size: 26rpx;
		font-weight: 700;
		color: #4a5053;
	}

	.THbox {
		// padding: 16rpx 12rpx;
		display: flex;
		justify-content: space-between;

		.THitem {
			position: relative;
			width: 220rpx;
			height: 220rpx;

			.bgPosition {
				position: absolute;
				top: 0;
				left: 0;

				.bgImg {
					width: 220rpx;					
					// height: 164rpx;
					// border-radius: 26rpx 26rpx 0 0;
					height: 164rpx;
					border-radius: 26rpx 26rpx 26rpx 26rpx;
					background-size: cover;
					// background-position: 50%
						/* 背景图片居中 */
					;
				}

				.text {
					border-radius: 0 0 26rpx 26rpx;
					background: #cd621a;
					padding: 8rpx 0;
					color: #fff;
					font-size: 26rpx;
					text-align: center;
				}
			}
		}
	}
}
</style>